<template>
  <header class="header">
    <div><a class="logo" href="#/"></a></div>
    <div><a :class="{ active: props.index == 0 }" href="#/">网站首页</a></div>
    <div><a :class="{ active: props.index == 1 }" href="#/article/1/1">政策解读</a></div>
    <div><a :class="{ active: props.index == 2 }" href="#/article/2/1">操作指南</a></div>
    <div class="admin-header">
      <template v-if="!store.isLogin">
        <el-button @click="proxy.$router.push('/login')">登录</el-button>
        <el-button @click="proxy.$router.push('/reg')">注册</el-button>
      </template>
      <template v-else>
        <el-dropdown @command="doUserMenu">
          <span class="el-dropdown-link">
            <img :size="36" :src="store.user.userImg" />
            {{ store.user.userName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="admin">控制台</el-dropdown-item>
              <el-dropdown-item divided command="myUpdate">修改个人基本信息</el-dropdown-item>
              <el-dropdown-item command="myPwd">修改个人登录密码</el-dropdown-item>
              <el-dropdown-item divided command="exit">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </div>
    <w-my-pwd v-model:open="open.pwd"></w-my-pwd>
    <w-my-update v-model:open="open.update"></w-my-update>
  </header>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { userStore } from "@/store/user";
import {ElMessageBox} from "element-plus";

import WMyUpdate from '@/components/WMyUpdate.vue';
import WMyPwd from '@/components/WMyPwd.vue';

const proxy = getCurrentInstance().proxy;
const store = userStore();

/**
index属性那个菜单是active状态
 */
const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
});

/**
 * 顶部下拉菜单点击处理
 * @param {String} command 点击的命令
 */
const doUserMenu = (command) => {
  doUserMenus[command]();
}
const open = ref({ update: false, pwd: false });
const doUserMenus = {
  exit() {
    // alert("退出");
    ElMessageBox.confirm("您确定要退出本系统吗?", "退出确认")
      .then(() => {
        store.logout();
        ElMessage.success("成功退出");
        $router.push("/");
      });
  },
  myUpdate() {
    // alert("更新个人资料");
    open.value.update = true;
  },
  myPwd() {
    // alert("修改登录密码");
    open.value.pwd = true;
  },admin() {
    proxy.$router.push("/"+store.user.roleId);//不同的角色进入不同的后台管理界面
  }
}
/**
 * 组件挂载事件
 */
onMounted(() => {

});

</script>

<style  scoped>
.header .active {
  font-weight: bold;
}

.admin-header {
  --admin-header-height:60px;
  --admin-header-text-color:#000;
}
.admin-header .el-dropdown-link>img {
  border-radius: var(--admin-header-height);
  width: calc(var(--admin-header-height) - .5rem);
  height: calc(var(--admin-header-height) - .5rem);
  background-color: #FFF;
  border: .1rem solid #fff;
  object-fit: cover;
  object-position: center center;
  margin-right: .5rem;
  overflow: hidden;

}

.admin-header .el-dropdown-link {
  display: inline-flex;
  align-items: center;
  color: var(--admin-header-text-color);
  font-size: 1rem;
}
</style>